<template>
  <div class="app-container">
    <div class="mobile-app">
      <!-- 顶部导航栏 -->
      <van-nav-bar
        :title="currentTitle"
        @click-right="onClickRight"
      >
        <!-- 左侧自定义图标（用户详情） -->
        <template #left>
          <van-icon name="user-circle-o" size="20" @click="showSidebar = true" />
        </template>
        
        <template #right>
          <van-icon name="search" size="18" />
          <van-icon name="apps-o" size="18" style="margin-left: 15px;" />
        </template>
      </van-nav-bar>

      <!-- 侧边栏 -->
      <van-popup
        v-model:show="showSidebar"
        position="left"
        :style="{ width: '70%', height: '100%' }"
      >
        <div class="sidebar">
          <div class="user-info">
            <van-image
              round
              width="60px"
              height="60px"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <div class="user-name">用户名</div>
            <div class="user-desc">VIP会员</div>
          </div>

          <van-cell-group>
            <van-cell title="个人中心" icon="user-o" is-link />
            <van-cell title="我的收藏" icon="star-o" is-link />
            <van-cell title="设置" icon="setting-o" is-link />
            <van-cell title="关于我们" icon="info-o" is-link />
          </van-cell-group>
        </div>
      </van-popup>

      <!-- 主要内容区域 -->
      <main class="app-content">
        <router-view />
      </main>

      <!-- 底部标签栏 -->
      <van-tabbar v-model="activeTab" route class="app-tabbar">
        <van-tabbar-item replace to="/home" icon="home-o" @click="change($event)">首页</van-tabbar-item>
        <van-tabbar-item replace to="/ai-chat" @click="change($event)">
          <template #icon>
            <img src="@/assets/img/ai-chat.png" style="width: 20px; height: 20px;" />
          </template>
          AI问答
        </van-tabbar-item>
        <van-tabbar-item replace to="/analysis" icon="cart-o" :badge="cartCount" @click="change($event)">
          <template #icon>
            <img src="@/assets/img/analysis.png" style="width: 20px; height: 20px;" />
          </template>
          案件分析
        </van-tabbar-item>
        <van-tabbar-item replace to="/persion" icon="user-o" @click="change($event)">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { showToast } from 'vant'

const route = useRoute()
const showSidebar = ref(false)
const activeTab = ref(0)
const cartCount = ref(3)
const title = ref('')

// 动态获取当前页面标题
const currentTitle = computed(() => {
  return route.meta.title || ''
})

const onClickRight = () => {
  showToast('功能开发中')
}

function change(event) {
  const text = event.currentTarget.textContent;
  const match = text.match(/^\d(.*)/);
  if (match) {
    const newText = match[1];
    console.log(newText);
    title.value = newText;
  } else {
    console.log(text);
    title.value = text;
  }
}
</script>

<style scoped>
/* 基础样式 - 移动端优先 */
.app-container {
  width: 100%;
}

.mobile-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  background-color: #f7f8fa;
}

.sidebar {
  height: 100%;
  background-color: #fff;
}

.user-info {
  padding: 20px;
  text-align: center;
  background-color: #1989fa;
  color: white;
}

.user-name {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

.user-desc {
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.8;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

.van-nav-bar__right {
  display: flex;
  align-items: center;
}

/* 底部导航栏样式 */
.app-tabbar {
  z-index: 100;
  position: relative; 
  --van-tabbar-height: 8vh;
}

/* 电脑端适配样式 */
@media (min-width: 768px) {
  .app-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }
  
  .mobile-app {
    width: 100%;
    max-width: 420px;
    height: 90vh;
    min-height: 700px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
  }
  
  /* 手机外观装饰 */
  .mobile-app::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: #f0f0f0;
    border-radius: 16px 16px 0 0;
    z-index: 1;
  }
  
  .mobile-app::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: #f0f0f0;
    border-radius: 0 0 16px 16px;
    z-index: 1;
  }
  
  .van-nav-bar {
    margin-top: 30px;
  }
  
  .app-content {
    padding: 16px;
  }
  
  /* 修复底部导航栏样式 */
  .app-tabbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #ebedf0;
  }
  
  /* 确保底部导航栏内容不被装饰元素遮挡 */
  .app-tabbar :deep(.van-tabbar) {
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
  }
}

/* 针对iOS设备的底部安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app-tabbar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>